<script setup>
    import {
        Management,
        Promotion,
        UserFilled,
        User,
        Crop,
        EditPen,
        SwitchButton,
        CaretBottom,
    } from "@element-plus/icons-vue";
    import { ElMessage, ElMessageBox } from "element-plus";
    import avatar from "@/assets/default.png";
    // 引入 pinia
    import { useUserInfoStore } from "@/stores/userInfo.js";
    const userInfoStore = useUserInfoStore();
    import { useTokenStore } from "@/stores/token.js";
    const tokenStore = useTokenStore();
    // 引入 api 接口
    import { getDetailService } from "@/api/user.js";
    // 引入路由
    import { useRouter } from "vue-router";
    const router = useRouter();

    // 获取用户详细信息
    const getDetail = async () => {
        // 发送请求
        const result = await getDetailService();
        // 给状态管理中添加用户信息
        userInfoStore.setUserInfo(result.data);
    };
    // 获取用户信息
    getDetail();

    // 下拉菜单跳转
    const handleCommand = command => {
        if (command === "logout") {
            //退出登录
            ElMessageBox.confirm("你确认退出登录码？", "温馨提示", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    //用户点击了确认
                    //清空pinia中的token和个人信息
                    userInfoStore.userInfo = {};
                    tokenStore.token = "";
                    //跳转到登录页
                    router.push("/login");
                })
                .catch(() => {
                    //用户点击了取消
                    ElMessage({
                        type: "info",
                        message: "取消退出",
                    });
                });
        } else {
            router.push("/user/" + command);
        }
    };
</script>

<template>
    <el-container class="layout-container">
        <!-- 左侧菜单 -->
        <el-aside width="200px">
            <div class="el-aside__logo"></div>
            <el-menu
                active-text-color="#ffd04b"
                background-color="#232323"
                text-color="#fff"
                router
            >
                <el-menu-item index="/article/category">
                    <el-icon>
                        <Management />
                    </el-icon>
                    <span>文章分类</span>
                </el-menu-item>
                <el-menu-item index="/article/manage">
                    <el-icon>
                        <Promotion />
                    </el-icon>
                    <span>文章管理</span>
                </el-menu-item>
                <el-sub-menu index="">
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>个人中心</span>
                    </template>
                    <el-menu-item index="/user/info">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>基本资料</span>
                    </el-menu-item>
                    <el-menu-item index="/user/avatar">
                        <el-icon>
                            <Crop />
                        </el-icon>
                        <span>更换头像</span>
                    </el-menu-item>
                    <el-menu-item index="/user/resetPassword">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        <span>重置密码</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <!-- 右侧主区域 -->
        <el-container>
            <!-- 头部区域 -->
            <el-header>
                <div>
                    黑马程序员：<strong>{{
                        userInfoStore.userInfo.nickname
                    }}</strong>
                </div>
                <el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown__box">
                        <el-avatar
                            :src="
                                userInfoStore.userInfo.userPic
                                    ? userInfoStore.userInfo.userPic
                                    : avatar
                            "
                        />
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="info" :icon="User"
                                >基本资料</el-dropdown-item
                            >
                            <el-dropdown-item command="avatar" :icon="Crop"
                                >更换头像</el-dropdown-item
                            >
                            <el-dropdown-item
                                command="resetPassword"
                                :icon="EditPen"
                                >重置密码</el-dropdown-item
                            >
                            <el-dropdown-item
                                command="logout"
                                :icon="SwitchButton"
                                >退出登录</el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <!-- 中间区域 -->
            <el-main>
                <!-- <div
                    style="width: 1290px; height: 570px; border: 1px solid #000"
                > -->
                <router-view></router-view>
                <!-- </div> -->
            </el-main>
            <!-- 底部区域 -->
            <el-footer>大事件 ©2023 Created by 黑马程序员</el-footer>
        </el-container>
    </el-container>
</template>

<style lang="scss" scoped>
    .layout-container {
        height: 100vh;

        .el-aside {
            background-color: #232323;

            &__logo {
                height: 120px;
                background: url("@/assets/logo.png") no-repeat center / 120px
                    auto;
            }

            .el-menu {
                border-right: none;
            }
        }

        .el-header {
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .el-dropdown__box {
                display: flex;
                align-items: center;

                .el-icon {
                    color: #999;
                    margin-left: 10px;
                }

                &:active,
                &:focus {
                    outline: none;
                }
            }
        }

        .el-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #666;
        }
    }
</style>
